import { createElement,Element,render } from './element';

// jsx -> createElement react 
// 真实DOm 内存中 虚拟dom(Element) 树
// 虚拟dom树可以立马转变成真实dom

let virtualDOM=createElement('ul',{class:'list'},[
  createElement('li',{class:'item'},['周杰伦']),
  createElement('li',{class:'item'},['林俊杰']),
  createElement('li',{class:'item'},['王红丽']),
]);
// console.log(virtualDOM);
let el=render(virtualDOM);

document.getElementById('root').appendChild(el);

// 浏览器底层 有 js 引擎v8  
// html css 渲染层 
// 打交道 一个世界到另一个世界
// VDOM 在内存之中
// 原来的状态树 数据MVVM 后新的状态树   一次性收集DOM 要修改的地方 [ul:class,li:class text] 
// 差异 让我们的界面更新

// 一次性通往渲染层 更新DOM

// 第二课虚拟DOM树
// VD 意义 比较的
let virtualDOM2=createElement("ul",{class:'list-group'},[
  createElement("li",{class:"item active"},['七里香']),
  createElement("li",{class:"item active"},['一千年以后']),
  createElement("li",{class:"item active"},['需要人陪 ']),
])




// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
